<template>
    <div class="header">
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>
        <div class="user-avator">
            <img src="../assets/img/seecoderLogo.png" />
        </div>
        <div class="logo">轻量级AI平台</div>
        <div class="header-right">
            <div class="header-user-con">
                <el-button icon="el-icon-thumb" circle type="primary" style="margin-right: 20px"
                @click="openInstruction1"
                ></el-button>
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{username}}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>

        <el-dialog
            title="第一步"
            v-model="instruction1visible"
            width="30%"
            top="15%"
            :modal="false"
            >
            <span style="margin-bottom: 20px; line-height: 30px">
                查看我的文件列表<br>添加文件，支持本地.csv文件与数据库表文件
                <br>可选择分享文件，分享时可选择对应结果文件
            </span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction2"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第二步"
                v-model="instruction2visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">进入文件，选择特征字段，新建AI模型配置或数据统计配置</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction1From2"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction3"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第三步"
                v-model="instruction3visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看AI模型配置列表</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction2From3"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction4"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第四步"
                v-model="instruction4visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">进入AI模型配置，选择算法，设定参数，生成AI模型</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction3From4"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction5"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第五步"
                v-model="instruction5visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看AI模型列表<br>训练模型，查看训练结果<br>
            选择文件，使用模型进行预测，查看预测结果<br>可选择部署模型或新建机器学习流水线<br>可选择分享模型</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction4From5"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction6"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第六步"
                v-model="instruction6visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看预测结果，可下载结果文件<br>可选择计算作业分数</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction5From6"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction7"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第七步"
                v-model="instruction7visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看模型部署情况</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction6From7"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction8"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第八步"
                v-model="instruction8visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看机器学习流水线</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction7From8"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction9"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第九步"
                v-model="instruction9visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看数据统计配置列表</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction8From9"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction10"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第十步"
                v-model="instruction10visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">进入数据统计配置，选择分析方法，新建数据统计分析</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction9From10"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction11"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第十一步"
                v-model="instruction11visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看数据统计分析列表，查看历史分析结果<br>
            可再次进行数据统计分析<br>可新建数据分析流水线</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction10From11"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction12"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第十二步"
                v-model="instruction12visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看数据分析流水线列表<br>
            选择文件，使用流水线</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction11From12"
                           size="medium" style="margin-top: 20px">上一步</el-button>
                <el-button type="primary" @click="openInstruction13"
                           size="medium" style="margin-top: 20px">下一步</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="第十三步"
                v-model="instruction13visible"
                width="30%"
                top="15%"
                :modal="false"
        >
            <span style="margin-bottom: 20px; line-height: 30px">查看数据广场<br>
            可进入文件广场，查看并收藏文件<br>可进入模型广场，查看并收藏模型<br>
            可查看已收藏文件列表，新建配置并使用<br>可查看已收藏模型列表，使用模型</span>
            <div style="text-align: right">
                <el-button type="primary" @click="openInstruction12From13"
                           size="medium" style="margin-top: 20px">上一步</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
    setup() {
        const username = localStorage.getItem("ms_username");
        const message = 2;

        const store = useStore();
        const collapse = computed(() => store.state.collapse);
        // 侧边栏折叠
        const collapseChage = () => {
            store.commit("handleCollapse", !collapse.value);
        };

        onMounted(() => {
            if (document.body.clientWidth < 1500) {
                collapseChage();
            }
        });

        // 用户名下拉菜单选择事件
        const router = useRouter();
        const handleCommand = (command) => {
            if (command === "loginout") {
                localStorage.removeItem("ms_username");
                router.push("/login");
            }
        };

        let instruction1visible = ref(false);
        let instruction2visible = ref(false);
        let instruction3visible = ref(false);
        let instruction4visible = ref(false);
        let instruction5visible = ref(false);
        let instruction6visible = ref(false);
        let instruction7visible = ref(false);
        let instruction8visible = ref(false);
        let instruction9visible = ref(false);
        let instruction10visible = ref(false);
        let instruction11visible = ref(false);
        let instruction12visible = ref(false);
        let instruction13visible = ref(false);

        //0
        const openInstruction1=()=>{
            router.push("/fileList");
            instruction1visible.value = true;
        };

        //1
        const openInstruction2=()=>{
            instruction1visible.value = false;
            router.push("/fileDetail?fileId=0");
            instruction2visible.value = true;
        };

        //2
        const openInstruction1From2=()=>{
            instruction2visible.value = false;
            router.push("/fileList");
            instruction1visible.value = true;
        };
        const openInstruction3=()=>{
            instruction2visible.value = false;
            router.push("/config");
            instruction3visible.value = true;
        };

        //3
        const openInstruction2From3=()=>{
            instruction3visible.value = false;
            router.push("/fileDetail?fileId=0");
            instruction2visible.value = true;
        };
        const openInstruction4=()=>{
            instruction3visible.value = false;
            router.push("/ConfigDetail?configId=0");
            instruction4visible.value = true;
        };

        //4
        const openInstruction3From4=()=>{
            instruction4visible.value = false;
            router.push("/config");
            instruction3visible.value = true;
        };
        const openInstruction5=()=>{
            instruction4visible.value = false;
            router.push("/modelList");
            instruction5visible.value = true;
            console.log(instruction5visible.value)
        };

        //5
        const openInstruction4From5=()=>{
            instruction5visible.value = false;
            router.push("/ConfigDetail?configId=0");
            instruction4visible.value = true;
        };
        const openInstruction6=()=>{
            instruction5visible.value = false;
            router.push("/predictionList?modelId=0");
            instruction6visible.value = true;
        };

        //6
        const openInstruction5From6=()=>{
            instruction6visible.value = false;
            router.push("/modelList");
            instruction5visible.value = true;
        };
        const openInstruction7=()=>{
            instruction6visible.value = false;
            router.push("/Deployment");
            instruction7visible.value = true;
        };

        //7
        const openInstruction6From7=()=>{
            instruction7visible.value = false;
            router.push("/predictionList?modelId=0");
            instruction6visible.value = true;
        };
        const openInstruction8=()=>{
            instruction7visible.value = false;
            router.push("/mlPipeline");
            instruction8visible.value = true;
        };

        //8
        const openInstruction7From8=()=>{
            instruction8visible.value = false;
            router.push("/Deployment");
            instruction7visible.value = true;
        };
        const openInstruction9=()=>{
            instruction8visible.value = false;
            router.push("/analysisConfig");
            instruction9visible.value = true;
        };

        //9
        const openInstruction8From9=()=>{
            instruction9visible.value = false;
            router.push("/mlPipeline");
            instruction8visible.value = true;
        };
        const openInstruction10=()=>{
            instruction9visible.value = false;
            router.push("/analysisConfigDetail?configId=0");
            instruction10visible.value = true;
        };

        //10
        const openInstruction9From10=()=>{
            instruction10visible.value = false;
            router.push("/analysisConfig");
            instruction9visible.value = true;
        };
        const openInstruction11=()=>{
            instruction10visible.value = false;
            router.push("/analysis");
            instruction11visible.value = true;
        };

        //11
        const openInstruction10From11=()=>{
            instruction11visible.value = false;
            router.push("/analysisConfigDetail?configId=0");
            instruction10visible.value = true;
        };
        const openInstruction12=()=>{
            instruction11visible.value = false;
            router.push("/analysisPipeline");
            instruction12visible.value = true;
        };

        //12
        const openInstruction11From12=()=>{
            instruction12visible.value = false;
            router.push("/analysis");
            instruction11visible.value = true;
        };
        const openInstruction13=()=>{
            instruction12visible.value = false;
            router.push("/square");
            instruction13visible.value = true;
        };

        //13
        const openInstruction12From13=()=>{
            instruction13visible.value = false;
            router.push("/analysisPipeline");
            instruction12visible.value = true;
        };

        return {
            username,
            message,
            collapse,
            collapseChage,
            handleCommand,

            instruction1visible,
            instruction2visible,
            instruction3visible,
            instruction4visible,
            instruction5visible,
            instruction6visible,
            instruction7visible,
            instruction8visible,
            instruction9visible,
            instruction10visible,
            instruction11visible,
            instruction12visible,
            instruction13visible,
            openInstruction1,
            openInstruction2,
            openInstruction1From2,
            openInstruction3,
            openInstruction2From3,
            openInstruction4,
            openInstruction3From4,
            openInstruction5,
            openInstruction4From5,
            openInstruction6,
            openInstruction5From6,
            openInstruction7,
            openInstruction6From7,
            openInstruction8,
            openInstruction7From8,
            openInstruction9,
            openInstruction8From9,
            openInstruction10,
            openInstruction9From10,
            openInstruction11,
            openInstruction10From11,
            openInstruction12,
            openInstruction11From12,
            openInstruction13,
            openInstruction12From13,
        };
    },
};
</script>
<style scoped>
.header {
  position: fixed;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 30px;
    color: #000000;
    background-color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
    background-color: #ffffff;
}

.user-avator img {
    float: left;
    width: 50px;
    margin-top: 15px;
}

.header .logo {
    float: left;
    width: 250px;
    line-height: 70px;
    margin-left: 15px;
}
.header-right {
    float: right;
    padding-right: 50px;
}
.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}
.btn-fullscreen {
    transform: rotate(45deg);
    margin-right: 5px;
    font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
  margin-top: 2px;
    position: relative;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}
.btn-bell-badge {
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #fff;
}
.btn-bell .el-icon-bell {
    color: #fff;
}

.user-avator {
    margin-left: 20px;
}

.el-dropdown-link {
    color: #606266;
    cursor: pointer;
}
.el-dropdown-menu__item {
    text-align: center;
}
</style>
